<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter之RenderObject介绍》 - Lucklyの博客 - 在阅读中遇见自己</title><meta name="Description" content="早起的年轻人做的网站"><meta property="og:title" content="《Flutter之RenderObject介绍》" />
<meta property="og:description" content="
本文主要介绍什么是 RenderObject？
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://luckly.work/flutter%E4%B9%8Brenderobject%E4%BB%8B%E7%BB%8D/" />
<meta property="og:image" content="https://luckly.work/logo.png"/>
<meta property="article:published_time" content="2021-07-31T21:02:55+08:00" />
<meta property="article:modified_time" content="2021-07-31T21:02:55+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://luckly.work/logo.png"/>

<meta name="twitter:title" content="《Flutter之RenderObject介绍》"/>
<meta name="twitter:description" content="
本文主要介绍什么是 RenderObject？
"/>
<meta name="application-name" content="LoveIt">
<meta name="apple-mobile-web-app-title" content="LoveIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://luckly.work/flutter%E4%B9%8Brenderobject%E4%BB%8B%E7%BB%8D/" /><link rel="prev" href="https://luckly.work/dart%E4%B9%8B%E7%AC%A8%E5%8A%9E%E6%B3%95%E5%AD%A6dart-dartdoc.dart%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/" /><link rel="next" href="https://luckly.work/dart%E4%B9%8Bmixins/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter之RenderObject介绍》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/luckly.work\/flutter%E4%B9%8Brenderobject%E4%BB%8B%E7%BB%8D\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/luckly.work\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "flutter","wordcount":  2150 ,
        "url": "https:\/\/luckly.work\/flutter%E4%B9%8Brenderobject%E4%BB%8B%E7%BB%8D\/","datePublished": "2021-07-31T21:02:55+08:00","dateModified": "2021-07-31T21:02:55+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/luckly.work\/images\/avatar.png",
                    "width":  528 ,
                    "height":  560 
                }},"author": {
                "@type": "Person",
                "name": "早起的年轻人"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">Lucklyの博客 - 在阅读中遇见自己</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/posts/">所有文章</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/flutter/">Flutter</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/read/">读书笔记</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/go/">Go</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/tags/">标签</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/">分类</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="https://github.com/ITmxs">Github</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/friend/">友链</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter之RenderObject介绍》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>早起的年轻人</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-31">2021-07-31</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 2150 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 5 分钟&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#开始">开始</a></li>
    <li><a href="#opacity">Opacity</a></li>
    <li><a href="#控件">控件</a></li>
    <li><a href="#渲染">渲染</a></li>
    <li><a href="#renderopacity">RenderOpacity</a></li>
    <li><a href="#element">Element</a></li>
    <li><a href="#结束">结束</a></li>
    <li><a href="#思考">思考</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍什么是 RenderObject？</p>
</blockquote>
<p>原文见 <a href="https://medium.com/flutter-community/flutter-what-are-widgets-renderobjects-and-elements-630a57d05208" target="_blank" rel="noopener noreffer">Flutter, what are Widgets, RenderObjects and Elements?</a></p>
<p>每个人都想知道 Flutter 是如何将 Widget 转换成屏幕上的像素的，对不对？</p>
<p>理解底层技术原理是优秀开发者跟伟大开发者的差别。</p>
<p>当你知道什么是可行，什么是不可行的话，就可以更轻松地创建自定义布局和特效，这能节省你很多的时间。</p>
<p>本文的目标是介绍 Flutter 背后的原理。我们从另一个不同的方面看 Flutter 并理解它是如何工作的。</p>
<h1 id="开始">开始</h1>
<p>你很可能已经知道如何使用 StatelessWidget 和 StatefulWidget。但它们只能组合已有的 Widget。对 Widget 进行布局和绘制实际上发生在别的地方。</p>
<p>强烈建议你打开最喜欢的 IDE 并一步步按下面的步骤来操作，实际代码常常让你恍然大悟。Intellij 中双击 Shift 可以输出名称来打开任何类。</p>
<h1 id="opacity">Opacity</h1>
<p>我们通过观察 <a href="https://github.com/flutter/flutter/blob/f38743593d00f13b21f49d8d8ee2d2206bf820d3/packages/flutter/lib/src/widgets/basic.dart#L150" target="_blank" rel="noopener noreffer">Opacity</a> Widget 来熟悉 Flutter 的基本概念。之所以选择 Opacity，因为它是一个非常基本的 Widget (特别简单)，可作为一个好例子来学习。</p>
<p>Opacity 只接受一个子 Widget。你可以用 Opacity 来包装任何 Widget 并调整其显示方式。除了 <code>child</code> 参数，只有另外一个 <code>opacity</code> 参数，它是浮点类型，值介于 0.0 和 1.0。这个参数用于控制不透明度。</p>
<h1 id="控件">控件</h1>
<p><code>Opacity</code> 是一个 <code>SingleChildRenderObjectWidget</code>。它的继承结构如下：</p>
<p>Opacity → SingleChildRenderObjectWidget → RenderObjectWidget → Widget</p>
<p>StatelessWidget 和 StatefulWidget 继承结构则是这样的：</p>
<p>StatelessWidget/StatefulWidget → Widget</p>
<p><strong>StatelessWidget/StatefulWidget 与 Opacity 的不同在于：前者只能组合其他 Widget，而后者实际上改变了 Widget 的绘制方式</strong>。</p>
<p>但是你在这几个类当中找不到跟实际绘制不透明度相关的任何代码。原因在于 Widget 只持有配置信息。在本例中，Opacity 持有的是 <code>opacity</code> 值。</p>
<blockquote>
<p>每次都可以在 <code>build()</code> 函数中创建新的 Widget 的原因是创建的成本并不高，因为它们不过是配置信息的容器</p>
</blockquote>
<h1 id="渲染">渲染</h1>
<p>渲染到底发生在哪里？实际上它们发生在 RenderObject 中。</p>
<p>你可以从名字猜到 RenderObject 负责的工作包括渲染。</p>
<p>Opacity Widget 使用如下方法创建并更新 <a href="https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/basic.dart#L188" target="_blank" rel="noopener noreffer">RenderObject</a>：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">@override
RenderOpacity createRenderObject(BuildContext context) =&gt; new RenderOpacity(opacity: opacity);

@override
void updateRenderObject(BuildContext context, RenderOpacity renderObject) {
  renderObject.opacity = opacity;
}
</code></pre></td></tr></table>
</div>
</div><h1 id="renderopacity">RenderOpacity</h1>
<p><code>Opacity</code> Widget 大小跟其 child 完全一样。基本上它每个方面跟其 child 都一样，除了绘制。它会在绘制 child 前加上不透明度。</p>
<p>本例中，RenderOpacity 需要实际所有方法(比如布局、点击测试、大小计算等等)并要求 child 完成实际工作。</p>
<p>而 <code>RenderOpacity</code> 继承自 <code>RenderProxyBox</code> (它混入了其他类)。这些类用于实际具体的方法，并将真正的计算工作推迟到 child 中进行。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">double get opacity =&gt; _opacity;
double _opacity;
set opacity(double value) {
  _opacity = value;
  markNeedsPaint();
}
</code></pre></td></tr></table>
</div>
</div><p>(注：这里的代码去掉了优化和断言，只保留最关键部分。完整代码见<a href="https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/proxy_box.dart#L736" target="_blank" rel="noopener noreffer">这里</a>)</p>
<p>字段通常为私有变量暴露一个 getter。而 setter 用于设置字段，此外它还调用了 <code>markNeedsPaint()</code> 和 <code>markNeedsLayout()</code> 方法。正如名字所言，这个方法告诉系统 “我有变化啦，请重新绘制/重新布局”。</p>
<p>在 <code>RenderOpacity</code> 中可以找到这个方法：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">@override
void paint(PaintingContext context, Offset offset) {
    context.pushOpacity(offset, _alpha, super.paint);
}
</code></pre></td></tr></table>
</div>
</div><p>(注：这里同样只保留最关键代码，去掉了优化和断言，完整代码见<a href="https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/proxy_box.dart#L757" target="_blank" rel="noopener noreffer">这里</a>)</p>
<p><code>PaintingContext</code> 基本上是一个高级的 canvas。这个 canvas 上有一个 <code>pushOpacity()</code> 方法。而这行代码就是不透明度的实现。</p>
<p>总结一下：</p>
<ul>
<li><code>Opacity</code> 并非 <code>StatelessWidget</code> 或 <code>StatefulWidget</code>，而是一个 <code>SingleChildRenderObjectWidget</code></li>
<li><code>Widget</code> 仅持有渲染器会用到的配置信息</li>
<li><code>Opacity</code> 持有一个 double 值用于表示不透明度</li>
<li>继承自 <code>RenderProxyBox</code> 的 <code>RenderOpacity</code> 完成实际布局/渲染工作</li>
<li><code>Opacity</code> 几乎跟 child 行为完全一致，所以它会将其方法代理到 child</li>
<li><code>RenderOpacity</code> 覆盖了 <code>paint</code> 方法。在这个方法中调用 <code>pushOpacity()</code> 来为 Widget 添加不透明度</li>
</ul>
<h1 id="element">Element</h1>
<p>记住，Widget 只是配置信息，<code>RenderObject</code> 只管理布局/渲染等工作。</p>
<p>在 Flutter 中你基本上不停地重新创建 Widget。<code>build()</code> 被调用时会创建一堆的 Widget。而每次发生变化时 <code>build()</code> 方法被调用。比如，有动画效果时 <code>build()</code> 方法不停地被调用。这意味着你并不能每次都重建子树。实际上，你想做的是更新它。</p>
<p>你无法获取 Widget 屏幕上的大小和位置，因为 Widget 只是一张蓝图，而不代表屏幕上的实际内容。它仅仅是对底层 RenderObject 会用到的变量的描述。</p>
<p>Element 是实际的树中的具体的 Widget。</p>
<p>具体过程是这样的：首次创建 Widget 时，由它生成 <code>Element</code>。这个 Element 被插入到树中，后续如果 Wiget 发生变化，它会跟旧的 Widget 比较，并根据差异对 Element 进行相应地更新。最重要的一点是，Element 并未重新创建，而是更新！</p>
<p>Element 是核心框架的中心，我们应该对它进行更多讨论，不过现在了解这些就足够了。</p>
<p>问题：在上面 Opacity 这个例子中 element 是在哪里创建的？</p>
<p>答案是 <code>SingleChildRenderObjectWidget</code> 创建了 Element。代码如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">@override
SingleChildRenderObjectElement createElement() =&gt; new SingleChildRenderObjectElement(this);
</code></pre></td></tr></table>
</div>
</div><p>具体见<a href="https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/framework.dart#L1631" target="_blank" rel="noopener noreffer">源码</a>。另外，<code>SingleChildRenderObjectElement</code> 只有一个 child。</p>
<p>问题：是Element 创建了 RenderObject 吗，但我们这个例子中看起来 Opacity Widget 创建了它自己的 RenderObject？</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">class Opacity extends SingleChildRenderObjectWidget {
  @override
  RenderOpacity createRenderObject(BuildContext context) {
    return RenderOpacity(
      opacity: opacity,
      alwaysIncludeSemantics: alwaysIncludeSemantics,
    );
  }
}
</code></pre></td></tr></table>
</div>
</div><p>这个问题说的应该是指 <code>Opacity.createRenderObject()</code> 方法创建了 <code>RenderObject</code>。</p>
<p>答案是这么做纯粹是为了更好用的 API。因为 Widget 通常需要一个 RenderObject 而不是自定义的 Element。实际上 RenderObject 是由 Element 创建的。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">SingleChildRenderObjectElement(SingleChildRenderObjectWidget widget) : super(widget);
</code></pre></td></tr></table>
</div>
</div><p>见<a href="https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/framework.dart#L4643" target="_blank" rel="noopener noreffer">源码</a>。<code>SingleChildRenderObjectElement</code> 持有 <code>RenderObjectWidget</code> 的引用，后者拥有创建 <code>RenderObject</code> 的方法。</p>
<p><code>mount()</code> 方法是 Element 被添加到 Element Tree 的地方。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">@override
void mount(Element parent, dynamic newSlot) {
  super.mount(parent, newSlot);
  _renderObject = widget.createRenderObject(this);
  attachRenderObject(newSlot);
  _dirty = false;
}
</code></pre></td></tr></table>
</div>
</div><p>一旦 <code>mount()</code> 方法被调用，Element 要求 Widget “请给我你想使用的 RenderObject，好让我保存下来”。</p>
<h1 id="结束">结束</h1>
<p>本文介绍了 Opacity Widget 内部工作机制。我的目标是介绍 Widget 背后的原理，仍然还有许多话题可以讨论，希望我能为你了解内部工作原理做一个好的指引。</p>
<h1 id="思考">思考</h1>
<p>Widget 跟 View 类比是不准确的。</p>
<ul>
<li>View 并不会频繁重建，Widget 会频繁重建</li>
<li>View 有实际的大小和位置，Widget 没有具体的大小的位置</li>
</ul></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-07-31</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://luckly.work/flutter%E4%B9%8Brenderobject%E4%BB%8B%E7%BB%8D/" data-title="《Flutter之RenderObject介绍》" data-hashtags="flutter"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://luckly.work/flutter%E4%B9%8Brenderobject%E4%BB%8B%E7%BB%8D/" data-hashtag="flutter"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Hacker News" data-sharer="hackernews" data-url="https://luckly.work/flutter%E4%B9%8Brenderobject%E4%BB%8B%E7%BB%8D/" data-title="《Flutter之RenderObject介绍》"><i class="fab fa-hacker-news fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://luckly.work/flutter%E4%B9%8Brenderobject%E4%BB%8B%E7%BB%8D/" data-title="《Flutter之RenderObject介绍》"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://luckly.work/flutter%E4%B9%8Brenderobject%E4%BB%8B%E7%BB%8D/" data-title="《Flutter之RenderObject介绍》" data-image="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/dart%E4%B9%8B%E7%AC%A8%E5%8A%9E%E6%B3%95%E5%AD%A6dart-dartdoc.dart%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/" class="prev" rel="prev" title="《Dart之笨办法学Dart Dartdoc"><i class="fas fa-angle-left fa-fw"></i>《Dart之笨办法学Dart Dartdoc</a>
            <a href="/dart%E4%B9%8Bmixins/" class="next" rel="next" title="《Dart之Mixins》">《Dart之Mixins》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">早起的年轻人</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"cookieconsent":{"content":{"dismiss":"同意","link":"了解更多","message":"本网站使用 Cookies 来改善您的浏览体验."},"enable":true,"palette":{"button":{"background":"#f0f0f0"},"popup":{"background":"#1aa3ff"}},"theme":"edgeless"},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.zh-cn","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
